import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:loxen/utils/color.dart';
import 'package:loxen/utils/config.dart';
import 'package:loxen/utils/string_res.dart';
import 'package:loxen/widget/my_subassembly.dart';
import 'package:provider/provider.dart';
import 'city_data.dart';

class _ItemData {
  String name;

  _ItemData(
    this.name,
  );
}

class _CityNotifier extends ChangeNotifier {
  int currentIndex;

  int childIndex;

  _CityNotifier(this.currentIndex, this.childIndex);

  void changeIndex(int index) {
    currentIndex = index;
    childIndex = -1;
    notifyListeners();
  }

  void changeChild(int index) {
    childIndex = index;
    notifyListeners();
  }
}

class CitySelectWidget extends StatelessWidget {
  final String currentCity;
  final int currentIndex;
  final int childIndex;

  const CitySelectWidget({Key key, this.currentCity, this.currentIndex = 1, this.childIndex = 1})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    List<_ItemData> provinces = [];
    List<List<_ItemData>> citys = [];
    provinces.add(_ItemData('当前城市'));
    citys.add([_ItemData(currentCity)]);
    citydata.forEach((key, value) {
      provinces.add(_ItemData(key));
      List<_ItemData> city = [];
      for (String name in value) {
        city.add(_ItemData(name));
      }
      citys.add(city);
    });
    return ChangeNotifierProvider<_CityNotifier>(
      create: (BuildContext context) {
        return _CityNotifier(currentIndex, childIndex);
      },
      builder: (context, _) {
        return Scaffold(
          appBar: PreferredSize(
            preferredSize: Size(double.infinity, 96.h),
            child: Container(
              color: Theme.of(context).backgroundColor,
              child: SafeArea(
                child: Column(
                  children: [
                    Row(
                      children: <Widget>[
                        MySubassembly.getBackIcon(context,
                            color: Theme.of(context).textTheme.subtitle2.color),
                        Expanded(
                          child: Center(
                            child: Text(
                              StringResources.xuan_ze_cheng_shi,
                              style: TextStyle(
                                  fontSize: 32.sp,
                                  fontWeight: FontWeight.w500,
                                  color: Theme.of(context).textTheme.subtitle2.color),
                            ),
                          ),
                        ),
                        MySubassembly.getSearchIcon(null, text: Text('')),
                      ],
                    ),
                    Divider(height: 1.h)
                  ],
                ),
              ),
            ),
          ),
          body: Container(
            color: Color(0xfff2f2f2),
            child: Row(
              children: [
                Container(
                  color: Theme.of(context).backgroundColor,
                  width: 190.w,
                  child: ListView.builder(
                      itemCount: provinces.length,
                      itemBuilder: (context, index) {
                        return InkWell(
                          onTap: () {
                            context.read<_CityNotifier>().changeIndex(index);
                          },
                          child: Selector<_CityNotifier, int>(
                            builder: (_, data, __) {
                              return Container(
                                margin: EdgeInsets.only(top: 30.h, bottom: 30.h),
                                padding: EdgeInsets.only(left: 30.w),
                                decoration: BoxDecoration(
                                  border: Border(
                                    left: BorderSide(
                                        color:
                                            index == data ? Colours.app_main : Colors.transparent,
                                        width: 5.w),
                                  ),
                                ),
                                child: Text(
                                  provinces[index].name,
                                  style: TextStyle(
                                    fontSize: 28.sp,
                                    color: index == data ? Colours.app_main : Color(0xff666666),
                                  ),
                                ),
                              );
                            },
                            selector: (_, value) => value.currentIndex,
                            shouldRebuild: (data, old) {
                              return (data != old) && (data == index || old == index);
                            },
                          ),
                        );
                      }),
                ),
                Expanded(
                  child: Selector<_CityNotifier, int>(
                    builder: (_, data, __) {
                      return ListView.builder(
                          itemCount: citys[data].length,
                          itemBuilder: (context, index) {
                            String str = citys[data][index].name;
                            return Selector<_CityNotifier, String>(
                              builder: (context, __, ___) {
                                var value = Provider.of<_CityNotifier>(context, listen: false);
                                var currentIndex = value.currentIndex;
                                var childIndex = value.childIndex;
                                bool select = (currentIndex == 0) ||
                                    (this.currentIndex == currentIndex && this.childIndex == index);
                                return Padding(
                                  padding: EdgeInsets.only(left: 60.w, right: 50.w),
                                  child: InkWell(
                                    onTap: () {
                                      Navigator.pop(context, {
                                        'currentIndex': currentIndex,
                                        'childIndex': index,
                                        'name': str,
                                      });
                                    },
                                    child: Row(
                                      children: [
                                        Expanded(
                                          child: Padding(
                                            padding: EdgeInsets.only(top: 30.h, bottom: 30.h),
                                            child: Text(
                                              str,
                                              style: TextStyle(
                                                  fontSize: 28.sp,
                                                  color: select
                                                      ? Colours.app_main
                                                      : Color(0xff666666)),
                                            ),
                                          ),
                                        ),
                                        select
                                            ? Image.asset(
                                                'images/selected_01.png',
                                                width: 24.w,
                                                height: 15.w,
                                              )
                                            : Constants.empty,
                                      ],
                                    ),
                                  ),
                                );
                              },
                              selector: (_, value) => "${value.currentIndex},${value.childIndex}",
                              shouldRebuild: (data, old) => data != old,
                            );
                          });
                    },
                    selector: (_, value) => value.currentIndex,
                  ),
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}
